<template>
  <div style="background-color: #fff;">

    <!-- <Form ref="form" :model="form" :rules="formRule" :label-width="120" style="padding: 10px;">

      <Divider orientation="left">分销设置</Divider>
      <FormItem label="是否开启分销" prop="isOpen">
        <i-switch size="large" v-model="form.isOpen" :true-value="true" :false-value="false">
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </i-switch>
      </FormItem>
      <FormItem label="分销关系绑定天数" prop="distributionDay">
        <InputNumber :min="1" :max="365" style="width:100px;" v-model="form.distributionDay"></InputNumber>
      </FormItem>
      <FormItem label="分销结算天数" prop="cashDay">
        <InputNumber :min="1"  :max="365"  style="width:100px;" v-model="form.cashDay"></InputNumber>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="submit">保存</Button>
      </FormItem>
    </Form> -->
    <Form ref="form" :model="form" :rules="formRule" :label-width="120" style="padding: 10px;">
      <Divider orientation="left">基础设置</Divider>
        <FormItem label="分销层级" prop="distriLevel">
          <Radio-group v-model="form.distriLevel">
            <Radio label="关闭"></Radio>
            <Radio label="一级"></Radio>
            <Radio label="二级"></Radio>
            <Radio label="三级"></Radio>
          </Radio-group>
        </FormItem>
        
        <FormItem label="分销内购" prop="">
          <Radio-group v-model="form.set1">
            <Radio label="关闭"></Radio>
            <Radio label="开启"></Radio>
          </Radio-group>
        </FormItem>

        <FormItem label="分销商锁定下线条件" prop="">
          <Radio-group v-model="form.set2">
            <Radio label="点击分享链接"></Radio>
            <Radio label="首次支付"></Radio>
            <Radio label="成为子分销商"></Radio>
          </Radio-group>
        </FormItem>

        <FormItem label="分销商审核" prop="">
          <Radio-group v-model="form.set3">
            <Radio label="不需要"></Radio>
            <Radio label="需要"></Radio>
          </Radio-group>
        </FormItem>

        <FormItem label="超越升级" prop="">
          <Radio-group v-model="form.set4">
            <Radio label="不允许"></Radio>
            <Radio label="允许"></Radio>
          </Radio-group>
        </FormItem>

        <FormItem label="升级审核" prop="">
          <Radio-group v-model="form.set5">
            <Radio label="不需要"></Radio>
            <Radio label="需要"></Radio>
          </Radio-group>
        </FormItem>

      <Divider orientation="left">默认分销商设置</Divider>

        <FormItem label="成为分销商条件" prop="distriLevel">
          <Radio-group v-model="form.set6">
            <Radio label="自助申请"></Radio>
            <Radio label="购买任意商品"></Radio>
            <Radio label="消费累计"></Radio>
          </Radio-group>
        </FormItem>
        
        <FormItem label="完善资料" prop="">
          <Radio-group v-model="form.set7">
            <Radio label="不需要"></Radio>
            <Radio label="需要"></Radio>
          </Radio-group>
        </FormItem>

        <FormItem label="表单背景图" prop="">
          <Upload
            ref="upload"
            :show-upload-list="false"
            :default-file-list="defaultList"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="2048"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :before-upload="handleBeforeUpload"
            multiple
            type="drag"
            action="//jsonplaceholder.typicode.com/posts/"
            style="display: inline-block;width:58px;">
              <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="camera" size="20"></Icon>
              </div>
          </Upload>
        </FormItem>

        <FormItem label="申请协议" prop="">
          <Radio-group v-model="form.set10">
            <Radio label="不显示"></Radio>
            <Radio label="显示"></Radio>
          </Radio-group>
        </FormItem>

      <Divider orientation="left">结算条件</Divider>
      <FormItem label="商品结算方式" prop="distriLevel">
          <Radio-group v-model="form.set11">
            <Radio label="商品价"></Radio>
            <Radio label="实际支付价"></Radio>
          </Radio-group>
        </FormItem>
        
        <FormItem label="佣金结算方式" prop="">
          <Radio-group v-model="form.set12">
            <Radio label="支付后结算"></Radio>
            <Radio label="确认收货结算"></Radio>
            <Radio label="订单完成结算"></Radio>
            <Radio label="手动打款"></Radio>
          </Radio-group>
        </FormItem>

        <FormItem label="退款扣除佣金" prop="">
          <Radio-group v-model="form.set13">
            <Radio label="不扣除"></Radio>
            <Radio label="扣除"></Radio>
          </Radio-group>
        </FormItem>

        <FormItem label="退款扣除分销业绩" prop="">
          <Radio-group v-model="form.set14">
            <Radio label="不扣除"></Radio>
            <Radio label="扣除"></Radio>
          </Radio-group>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="submit">保存</Button>
        </FormItem>
    </Form>
  </div>
</template>

<script>
import { setSetting, getSetting } from "@/api/index";
import { regular } from "@/utils";
export default {
  name: "distributionSetting",
  data() {
    return {
      form: {
        // 添加或编辑表单对象初始化数据
        isOpen: true,
        distributionDay: 0, //分销关系绑定天数
        cashDay: 0, //分销结算天数,
        distriLevel: "二级",
        set1: "开启",
        set2: "首次支付",
        set3: "不需要",
        set4: "不允许",
        set5: "需要",

        set6: "购买任意商品",
        set7: "需要",
        set8: "需要",
        set9: "需要",
        set10: "显示",

        set11: "实际支付价",
        set12: "订单完成结算",
        set13: "扣除",
        set14: "扣除",
        columns: [
          {
            title: "表单类型",
            key: "type"
          },{
            title: "表单名称",
            key: "name"
          },{
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render (row, column, index) {
                return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
            }
          }
        ]
      },
      tableData: [
        {
          type: "纯数字",
          name: "666"
        }
      ],
      formRule: {
        isOpen: [
          regular.REQUIRED
        ],
        distributionDay: [
          regular.REQUIRED
        ],
        cashDay: [
          regular.REQUIRED
        ],
      }
    };
  },
  methods: {
    // 初始化数据
    init() {
      this.getDataList();
    },
    // 获取分销设置数据
    getDataList() {
      getSetting("DISTRIBUTION_SETTING").then((res) => {
        if (res.success) {
          // this.form = res.result;
        }
      });
    },
    // 提交api
    submit() {
      this.$Message.success("操作成功");
      // setSetting("DISTRIBUTION_SETTING", this.form).then((res) => {
      //   if (res.success) {
      //     this.$Message.success("操作成功");
      //     this.getDataList();
      //   }
      // });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
</style>
